<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <style>
        .text-popup {
            animation: textPopup 1s;
            color: red;
            user-select: none;
            white-space: nowrap;
            position: absolute;
            z-index: 99;
        }
        @keyframes textPopup {
            0%, 100% {
                opacity: 0;
            }
            5% {
                opacity: 1;
            }
            100% {
                transform: translateY(-50px);    
            }
        }
        </style>
    </head>
    <body>
        <h1>点击页面出现富强、民主这类文字动画效果</h1>
        <p><a href="https://www.zhangxinxu.com/wordpress/2018/05/click-page-popup-text-tips/">来源</a></p>
        <script>
        var fnTextPopup = function (arr, options) {
            // arr参数是必须的
            if (!arr || !arr.length) {
                return;    
            }
            // 主逻辑
            var index = 0;
            document.documentElement.addEventListener('click', function (event) {
                var x = event.pageX, y = event.pageY;
                var eleText = document.createElement('span');
                eleText.className = 'text-popup';
                this.appendChild(eleText);
                if (arr[index]) {
                    eleText.innerHTML = arr[index];
                } else {
                    index = 0;
                    eleText.innerHTML = arr[0];
                }
                // 动画结束后删除自己
                eleText.addEventListener('animationend', function () {
                    eleText.parentNode.removeChild(eleText);
                });
                // 位置
                eleText.style.left = (x - eleText.clientWidth / 2) + 'px';
                eleText.style.top = (y - eleText.clientHeight) + 'px';
                // index递增
                index++;
            });    
        };

        fnTextPopup(['富强', '民主', '文明', '和谐', '自由', '平等', '公正', '法治', '爱国', '敬业', '诚信', '友善']);
        </script>
    </body>
</html>